<script setup>
import { GlobeAltIcon, EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
import { useI18n } from "vue-i18n";
import { reactive, onMounted } from 'vue';
import { useRouter } from "vue-router";
import { login, getCsv } from "@/api"
import { showToast } from 'vant';

const { t } = useI18n();
const router = useRouter();
const state = reactive({
    tel: '',//13799252403
    password: '',//admin1234
    type: 'password',
    loading: false,
    url: '',
})

const goTo = (url) => {
    router.push(url)
}

const switchEye = () => {
    state.type = state.type === 'password' ? 'text' : 'password'
}
const sign = () => {
    if (state.tel == '' || state.password == '') {
        showToast(t('Please enter your login account and password'));
        return
    }
    if (state.loading) {
        return
    }
    state.loading = true;
    login({
        tel: state.tel,
        password: state.password
    }).then(res => {
        localStorage.setItem('token', res.token);
        showToast(t('Login successful'));
        setTimeout(() => {
            goTo('/')
        }, 800);
    }).catch(err => {
        showToast(err.msg)
    }).finally(() => {
        state.loading = false;
    })
}
onMounted(() => {
    getCsv().then(res => {
        state.url = res.csv2.url
    })
})

</script>

<template>
    <div class="relative" style="padding-top:0.1rem">
        <div class="absolute right-0 top-0 py-1.5 px-2" @click="goTo('/language')">
            <GlobeAltIcon class="h-3 w-3 text-black-300" />
        </div>
    </div>
    <div class="pt-0">
        <div class="flex flex-wrap justify-center mx-0 w-full">
            <div class="text-center px-4 mt-4">
            </div>
        </div>
    </div>

    <div class="p-1.5 m-1.5 flex justify-center flex-col " style="margin-top: 20px;">
        <img src="/images/logo.jpg" class="w-24 place-self-center" />
        <span class="text-xs leading-10 font-bold">Sign In</span>
        <ul class="flex flex-col space-y-1">
            <li>
                <!-- <input type="text" name="tel" placeholder="Please enter your username or mobile number" value=""> -->
                <input type="text" class="w-full input input-bordered h-4 text-xs text-center" v-model="state.tel"
                    style="font-size: 0.4rem;" :placeholder="$t('Username or phone number')" />
            </li>
            <li>
                <label class="input input-bordered flex items-center gap-2 h-4 pr-0.5">
                    <input :type="state.type" class="grow text-center" :placeholder="$t('Please enter password')"
                        style="font-size: 0.4rem;" v-model="state.password" />
                    <EyeSlashIcon v-if="state.type === 'password'" class="h-3 w-3 text-gray-400" @click="switchEye" />
                    <EyeIcon v-if="state.type === 'text'" class="h-3 w-3 text-gray-400" @click="switchEye" />
                </label>
            </li>
        </ul>
        <div class="pt-4" @click="sign">
            <button class="btn btn-primary btn-xs w-full" :disabled="state.loading" style="font-size: 0.4rem;">{{
            $t('Log In') }}</button>
        </div>

        <div class="h-4 mt-4">
            <!-- <button class="btn btn-ghost text-xs px-0 text-gray-400 h-4 min-h-1 " style="font-size: 0.4rem;">{{
            $t('Forget password?') }}</button> -->
            <a class="btn btn-ghost text-xs px-0 text-gray-400 h-4 min-h-1" style="font-size: 0.4rem;"
                :href="state.url">{{ $t('Forget password?') }}</a>
        </div>
        <hr style="border: 2px solid #808080;margin-top:0px!important;margin-bottom:0px!important">
        <span class="text-xs leading-5 font-bold" style="font-size: 0.4rem;">Create an account</span>
        <div class="pt-4" @click="goTo('/register')">
            <button class="btn btn-primary btn-xs w-full " style="font-size: 0.4rem;">{{ $t('Sign Up') }}</button>
        </div>

        <ul role="menu" aria-label="Social Media" class="flex  justify-evenly pt-4" style="margin-top:20px;">
            <li role="presentation" class="ob-mb-0">
                <a role="menuitem" aria-label="Visit Instagram (opens in a new window)" href="https://www.facebook.com/"
                    target="_blank" rel="nofollow noopener" title="See Us On Instagram" class="ob-ml-8 ob-text-white">
                    <svg t="1698254009862" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5390" style="height:25px;width:25px;margin-left:10px">
                        <path
                            d="M933.799652 195.213054c0-58.295708-47.258327-105.554034-105.554034-105.554034l-633.119545 0c-58.295708 0-105.554034 47.258327-105.554034 105.554034l0 633.119545c0 58.295708 47.258327 105.554034 105.554034 105.554034l633.119545 0c58.295708 0 105.554034-47.258327 105.554034-105.554034L933.799652 195.213054zM776.210497 300.460096l-106.423845 0 0 105.400538 106.423845 0 0 105.400538-106.423845 0 0 317.224922-105.400538 0 0-317.224922-105.400538 0 0-105.400538 105.400538 0L564.386114 320.676533l0-52.777017c0-35.433 39.028898-72.839959 78.785368-72.839959l52.777017 0 80.261998 0L776.210497 300.460096z"
                            fill="#333333" p-id="5391"></path>
                    </svg>
                </a>
            </li>
            <li role="presentation" class="ob-mb-0" style="">
                <a role="menuitem" aria-label="Visit Facebook (opens in a new window)"
                    href="https://www.instagram.com/tiffanyandco/ " target="_blank" rel="nofollow noopener"
                    title="Find Us On Facebook" class="ob-ml-0 lg:ob-ml-8 ob-text-white">
                    <svg class="icon body-type--kilo" viewBox="0 0 40 40"
                        style="height:25px;width:25px;margin-left:10px">
                        <g fill-rule="evenodd">
                            <path
                                d="M19.968.063c-5.423 0-6.103.023-8.232.12-2.126.097-3.577.435-4.848.928a9.787 9.787 0 0 0-3.536 2.304A9.787 9.787 0 0 0 1.048 6.95C.555 8.221.218 9.673.12 11.8.023 13.929 0 14.609 0 20.03c0 5.424.023 6.104.12 8.233.097 2.126.435 3.577.928 4.848a9.787 9.787 0 0 0 2.304 3.536 9.787 9.787 0 0 0 3.536 2.304c1.27.493 2.722.83 4.848.928 2.13.097 2.81.12 8.232.12 5.424 0 6.104-.023 8.233-.12 2.126-.097 3.577-.435 4.848-.928a9.787 9.787 0 0 0 3.536-2.304 9.788 9.788 0 0 0 2.304-3.536c.493-1.27.83-2.722.928-4.848.097-2.13.12-2.81.12-8.233s-.023-6.103-.12-8.232c-.097-2.126-.435-3.577-.928-4.848a9.788 9.788 0 0 0-2.304-3.536A9.787 9.787 0 0 0 33.05 1.11C31.779.618 30.327.281 28.2.183c-2.13-.097-2.81-.12-8.233-.12m0 3.598c5.332 0 5.964.02 8.07.116 1.946.09 3.004.415 3.707.688.932.362 1.598.795 2.296 1.494.7.698 1.132 1.364 1.494 2.296.273.703.599 1.76.688 3.707.096 2.106.116 2.738.116 8.07 0 5.331-.02 5.963-.116 8.068-.09 1.947-.415 3.005-.688 3.708-.362.932-.795 1.598-1.494 2.296-.698.7-1.364 1.132-2.296 1.494-.703.274-1.76.599-3.708.688-2.105.096-2.736.116-8.069.116-5.332 0-5.963-.02-8.068-.116-1.947-.09-3.005-.414-3.708-.688-.932-.362-1.598-.795-2.296-1.494-.699-.698-1.132-1.364-1.494-2.296-.273-.703-.599-1.76-.688-3.708-.096-2.105-.116-2.737-.116-8.069 0-5.331.02-5.963.116-8.069.09-1.946.415-3.004.688-3.707.362-.932.795-1.598 1.494-2.296.698-.7 1.364-1.132 2.296-1.494.703-.273 1.76-.599 3.708-.688 2.105-.096 2.737-.116 8.068-.116">
                            </path>
                            <path
                                d="M19.968 26.688a6.656 6.656 0 1 1 0-13.313 6.656 6.656 0 0 1 0 13.313m0-16.91c-5.663 0-10.254 4.59-10.254 10.253 0 5.664 4.591 10.255 10.254 10.255 5.664 0 10.254-4.591 10.254-10.255 0-5.663-4.59-10.254-10.254-10.254M33.024 9.372a2.396 2.396 0 1 1-4.793 0 2.396 2.396 0 0 1 4.793 0">
                            </path>
                        </g>
                    </svg>
                </a>
            </li>
            <li role="presentation" class="ob-mb-0">
                <a role="menuitem" aria-label="Visit Twitter (opens in a new window)"
                    href="https://twitter.com/TiffanyAndCo/" target="_blank" rel="nofollow noopener"
                    title="Follow Us On Twitter" class="ob-ml-8 ob-text-white">
                    <svg class="icon body-type--kilo" viewBox="0 0 44 36"
                        style="height:25px;width:25px;margin-left:10px">
                        <path fill-rule="evenodd"
                            d="M43.743 4.443a18.042 18.042 0 0 1-5.155 1.416A9.021 9.021 0 0 0 42.535.89a17.976 17.976 0 0 1-5.703 2.177 8.958 8.958 0 0 0-6.55-2.832 8.976 8.976 0 0 0-8.74 11.018C14.081 10.88 7.471 7.3 3.044 1.872a8.944 8.944 0 0 0-1.215 4.52 8.959 8.959 0 0 0 3.993 7.466 8.898 8.898 0 0 1-4.067-1.122v.114c0 4.347 3.092 7.973 7.199 8.8a8.894 8.894 0 0 1-2.364.314c-.581 0-1.142-.053-1.69-.16 1.142 3.56 4.454 6.164 8.38 6.23a17.96 17.96 0 0 1-11.144 3.84c-.728 0-1.436-.04-2.137-.12a25.399 25.399 0 0 0 13.755 4.026c16.507 0 25.535-13.676 25.535-25.528 0-.393-.007-.78-.027-1.168a17.95 17.95 0 0 0 4.48-4.64">
                        </path>
                    </svg>
                </a>
            </li>
            <li role="presentation" class="ob-mb-0">
                <a role="menuitem" aria-label="Visit Pinterest (opens in a new window)"
                    href="https://www.youtube.com/OfficialTiffanyAndCo/" target="_blank" rel="nofollow noopener"
                    title="Pin Us On Pinterest" class="ob-ml-8 ob-text-white">
                    <svg class="icon body-type--kilo" viewBox="0 0 32 32"
                        style="height:25px;width:25px;margin-left:10px">
                        <path
                            d="M26 4h-20c-3.3 0-6 2.7-6 6v12c0 3.3 2.7 6 6 6h20c3.3 0 6-2.7 6-6v-12c0-3.3-2.7-6-6-6zM12 24v-16l10 8-10 8z">
                        </path>
                    </svg>
                </a>
            </li>
        </ul>
        <p class="place-self-center" style="padding-top:50px;font-weight:bold;'">
            @ Walmart . All Rights Reserved.
        </p>
    </div>

</template>